import "./index.css"
import "./img/01.jpeg"
import "./img/02.jpeg"
import "./img/03.jpeg"
import "./img/04.jpeg"

const sliderData = [
  {
    url: "../../img/01.jpeg",
  },
  {
    url: "../../img/02.jpeg",
  },
  {
    url: "../../img/03.jpeg",
  },
  {
    url: "../../img/04.jpeg",
  },
];
const img = document.querySelector("img");
const p = document.querySelector("p");
// 如果是点击的话需要获取所有的li
const li = document.querySelectorAll("li");
const btn_front = document.querySelector(".front");
const btn_next = document.querySelector(".next");
// 时间从0开始
let time = 0;
// 自动播放
let shijian = 0;
function changePage() {
  img.src = sliderData[time].url;
  // p.innerHTML = sliderData[time].title;
  const active = document.querySelector(".active");
  active.classList.remove("active");
  const li_a = document.querySelector(`li:nth-child(${time + 1})`);
  li_a.classList.add("active");
}

// 下一张函数
function nextPage() {
  time++;
  changePage();
  if (time >= sliderData.length - 1) {
    time = -1;
  }
}
// 自动播放下一张的函数
function nextPageAuto() {
  shijian = setInterval(function () {
    nextPage();
  }, 1000);
}
nextPageAuto();
// 鼠标悬停时,暂停自动播放
const box = document.querySelector(".box");
box.addEventListener("mouseenter", function () {
  clearInterval(shijian);
});
box.addEventListener("mouseleave", function () {
  // 在设置时间函数前,先将其关掉,避免重复时间函数
  clearInterval(shijian);
  nextPageAuto();
});
// 点击小圆点时能够跳转到对应的图片和文字
for (let click = 0; click < sliderData.length; click++) {
  li[click].addEventListener("click", function () {
    img.src = sliderData[click].url;
    // p.innerHTML = sliderData[click].title;
    const active = document.querySelector(".active");
    active.classList.remove("active");
    const li_a = document.querySelector(`li:nth-child(${click + 1})`);
    li_a.classList.add("active");
    time = click;
    // console.log(time);
  });
}
// 点击播放下一张
btn_next.addEventListener("click", function () {
  nextPage();
});
// 点击播放上一张
btn_front.addEventListener("click", function () {
  time--;
  // 如果是第一张的上一张,则显示最后一张
  if (time < 0) {
    time = sliderData.length - 1;
  }
  changePage();
});